<template>
	<view class="pageContain">
		<!-- 背景图 -->
		<BgImage />
		<!-- logo显示 -->
		<NavBar leftType="text" letText="我的保单总览" />
		<!-- 统计数据 -->
		<view class="totalLine public_flexBetween">
			<view class="totalCard">
				<image class="totalImg1" src="../../static/images/overview/totalImg1.png"></image>
				<view class="totalMain">
					<view>保单总数</view>
					<view>{{ policyInfo.count || 0 }}张</view>
				</view>
			</view>
			<view class="totalCard">
				<image src="../../static/images/overview/totalImg2.png"></image>
				<view class="totalMain">
					<view>总保障金额</view>
					<view>{{ policyInfo.totalAmount || 0 }}</view>
				</view>
			</view>
		</view>
		<!-- 中间信息卡片 -->
		<view class="infoCard">
			<image class="infoBg" src="../../static/images/overview/infoBg.png"></image>
			<!-- 中间吉祥物 -->
			<image class="mascot" src="../../static/images/overview/mascot.png"></image>
			<!-- 标题 -->
			<view class="subTitle">
				<image src="../../static/images/home/subTitle.png"></image>
			</view>
			<!-- 数据部分 -->
			<view class="dataInfo">
				<!-- 背景 -->
				<view class="dataBg">
					<image class="dataImg" src="../../static/images/overview/leftValue.png"></image>
					<image class="dataImg" src="../../static/images/overview/rightValue.png"></image>
				</view>
				<view class="dataMain public_flexBetween">
					<view class="valueMoney">
						<view>你的保单价值</view>
						<view>{{ policyInfo.totalCashValue || 0 }}</view>
					</view>
					<view class="valueMoney">
						<view>可以抵押贷款</view>
						<view>{{ policyInfo.totalMortgageLoan || 0 }}</view>
					</view>
				</view>
			</view>
			<!-- 截止时间 -->
			<view class="deadline">截止时间：2025-5-20</view>
		</view>
		<!-- 保单列表 -->
		<view class="policyListTitle">我的保单列表</view>
		<view v-for="item in policyList" :key="item.id" @click="goPage(item.id)">
			<PolicyItem :policyInfo="item" />
		</view>
	</view>
</template>

<script setup>
import { onMounted, ref, getCurrentInstance } from 'vue';
import PolicyItem from './PolicyItem.vue';
import { policyOverviewApi } from '../../utils/api';

const { proxy } = getCurrentInstance();

const policyInfo = ref({}); // 整体数据
const policyList = ref([]); // 保单列表

onMounted(() => {
	getData();
});

// 获取数据
const getData = async () => {
	let res = await proxy.$util.request(policyOverviewApi(), null, 'GET');
	if (res && res.data) {
		policyInfo.value = res.data;
		policyList.value = res.data.policyList;
	}
}

const goPage = (id) => {
	uni.navigateTo({
		url: `/pages/policyDetails/policyDetails?id=${id}`
	})
}
</script>

<style lang='scss' scoped>
.pageContain {

	// 统计总数
	.totalLine {

		.totalCard {
			display: flex;
			height: 120rpx;
			align-items: center;
			padding: 14rpx 20rpx;
			border-radius: 24rpx;
			background-color: #FFF;
			width: calc(50% - 16rpx);

			// 图片
			image {
				width: 96rpx;
				height: 96rpx;
			}

			.totalImg1 {
				border-radius: 20rpx;
				background-color: #FFD190;
			}

			// 右侧文字
			.totalMain {
				height: 100%;
				display: flex;
				margin-left: 24rpx;
				flex-direction: column;
				justify-content: space-between;

				>view {
					font-size: 24rpx;

					&:last-child {
						font-size: 36rpx;
						font-weight: 600;
					}
				}
			}
		}
	}

	// 信息卡片
	.infoCard {
		width: 100%;
		height: 440rpx;
		margin-top: 110rpx;
		position: relative;

		// 背景
		.infoBg {
			z-index: -1;
			width: 100%;
			height: 100%;
			position: absolute;
		}

		// 吉祥物
		.mascot {
			left: 0;
			right: 0;
			top: -95rpx;
			margin: auto;
			width: 128rpx;
			height: 128rpx;
			position: absolute;
		}

		// 副标题
		.subTitle {
			text-align: center;
			padding-top: 82rpx;

			image {
				width: 218rpx;
				height: 32rpx;
			}
		}

		// 中间数据
		.dataInfo {
			left: 28rpx;
			width: 634rpx;
			height: 230rpx;
			margin-top: 12rpx;
			position: relative;

			// 背景设置
			.dataBg {
				position: relative;

				.dataImg {
					width: 360rpx;
					height: 230rpx;

					&:last-child {
						right: 0;
						position: absolute;
					}
				}
			}

			// 数据
			.dataMain {
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				position: absolute;
				padding: 44rpx 20rpx 36rpx;

				.valueMoney {
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					view {
						color: #FFF;

						&:last-child {
							font-size: 60rpx;
							font-weight: 600;
							font-style: italic;
						}
					}

					&:last-child {
						text-align: right;
					}
				}
			}
		}

		// 截止时间
		.deadline {
			font-weight: 500;
			font-size: 24rpx;
			color: #8A755C;
			margin-top: 32rpx;
			text-align: center;
		}
	}

	// 保单列表
	.policyListTitle {
		font-size: 32rpx;
		font-weight: 500;
		margin: 32rpx 0;
	}

	:deep(.policyItem) {
		margin-bottom: 20rpx;
	}
}
</style>